<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				要求：将用户输入的内容进行反转
				abc		cba
			-->
			计算:<input type="text" v-model="msg" /><br>
			<!-- 	1.将字符串拆分为数组
				2.reverse() 将数组进行反转 [c][b][a]
				3.将数组拼接为字符串join('连接符')
			-->
			{{msg.split('').reverse().join('')}}<br>
			{{reverseStr}}
			{{reverseStr}}
			{{reverseA()}}
			{{reverseA()}}

			<!-- 计算属性与方法的区别
					1.计算属性有缓存的操作 只执行一次.	效率更高
					2.计算属性调用时,只需要写属性名称	xxx
					3.用户每次调用都会执行方法.没有缓存操作
					4/方法调用时需要添加	xxx
			 -->
			<!-- 
				计算属性的说明:为了简化插值表达式,可以将计算的过程到计算属性中 
			-->
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
				methods: {
					reverseA() {
						console.log("我是方法调用")
						return this.msg.split('').reverse().join('')
					}
				},
				//定义计算属性
				computed: {
					//必须有返回值
					reverseStr() {
						console.log("我是计算属性")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>
